<template>
	<view class="container">
		<view class="bg-color-white pt30">
			<view class="notice clearfix">
				<image src="../../static/images/ic_notice_01.png"></image>
				<view>根据相关政策，就诊人姓名、证件信息平台审核，不会外传，请输入正确的就诊人信息。</view>
			</view>
		</view>
		<view class='bg-color-white info'>
			<uni-forms ref="patientForm" :modelValue="patientForm" label-width="90px">
				<view class="pt30 pr30 pl30">
					<uni-forms-item label="姓名">
						<uni-easyinput v-model="patientForm.name" placeholder="请输入就诊人姓名" :inputBorder="false"
							placeholder-style="font-size: 28rpx;" />
					</uni-forms-item>
					<uni-forms-item label="身份证">
						<uni-easyinput v-model="patientForm.idCard" placeholder="请输入就诊人身份证" :inputBorder="false"
							placeholder-style="font-size: 28rpx;" />
					</uni-forms-item>
					<uni-forms-item label="手机号码">
						<uni-easyinput v-model="patientForm.phone" placeholder="就诊人手机号" :inputBorder="false"
							placeholder-style="font-size: 28rpx;" />
					</uni-forms-item>
					<uni-forms-item label="婚姻状况">
						<uni-data-checkbox v-model="patientForm.maritalStatus" :localdata="maritalStatus" />
					</uni-forms-item>
				</view>
				<view class="line20"></view>
				<view class="pr30 pl30">
					<uni-forms-item label="过敏史">
						<uni-data-checkbox v-model="patientForm.maritalStatus" :localdata="arrayList" />
					</uni-forms-item>
					<view class="pb30">
						<view class="box-border" @click="showPopup()">123</view>
					</view>
				</view>
				<view class="line20"></view>
				<view class="pr30 pl30">
					<uni-forms-item label="既往史">
						<uni-data-checkbox v-model="patientForm.maritalStatus" :localdata="arrayList" />
					</uni-forms-item>
					<view class="pb30">
						<view class="box-border" @click="showPopup()">123</view>
					</view>
				</view>
			</uni-forms>

		</view>
		<view class='fixed b0 l0 w100 bg-color-white p30 flex_m'>
			<view class='save f28 cfff flex_c_m ml30 bg-color-primary' bindtap='onSave'>保存</view>
		</view>
		<view class="flex p30 agreement">
			<view class="w100 flex">
				<label>
					<checkbox value="isAgreementChecked" checked="true" activeBackgroundColor="#1989fa" iconColor="#fff"
						style="transform:scale(0.8)" />
					<text class="c666 f24">我已阅读并同意</text>
					<text class="f24 color-primary" catchtap='onGotoAgreement'>《用户协议》</text>
					<text class="f24 color-primary" catchtap='onGotoAgreement'>《隐私政策》</text>
				</label>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="content pl30 pr30">
				<view class="close" bindtap="close">
					<image src="../../static/images/ic_close_01.png" class="imgBlock"></image>
				</view>
				<view class="w100 tc pt40 pb40 c333 f32">
					过敏史
				</view>
				<uni-easyinput type="textarea" v-model="textValue" placeholder="请输入内容" maxlength="1000"></uni-easyinput>
				<view class="clearfix pt15 f28 pb40">
					<view class="fl c333" bindtap="clearValue">清空</view>
					<view class="fr cB4B4B4">{{textValue.length}}/1000</view>
				</view>
				<view class="pb30 f32 c333 b">
					药物过敏
				</view>
				<view class="drug">
					<text>慢性肝炎</text>
				</view>
				<view class="confir">
					<button bindtap="confirFun">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return{
				patientForm:{
					name: undefined,
					idCard: undefined,
					phone: undefined,
					maritalStatus: undefined,
					allergy: undefined, 
					pastHistory: undefined,
					openId: undefined,
					isPrimary: 1,
				},
				maritalStatus: [{
					text: '未婚',
					value: '0'
				}, {
					text: '已婚',
					value: '1'
				}],
				arrayList: [{
					text: '无',
					value: '0'
				}, {
					text: '有',
					value: '1'
				}],
				textValue:"",
				isAgreementChecked:""
			}
			
		},
		methods:{
			showPopup(){
				this.$refs.popup.open('bottom')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F8F8F8;
		padding-bottom: 174rpx;
	}

	.notice {
		width: 686rpx;
		background: #EEF9FF;
		margin: 0 auto;
		padding-bottom: 22rpx;
		border-radius: 20rpx;
	}

	.notice image {
		display: block;
		float: left;
		width: 30rpx;
		height: 26rpx;
		margin-left: 24rpx;
		margin-top: 28rpx;
	}

	.notice view {
		width: 588rpx;
		float: right;
		color: #2B94FF;
		font-size: 28rpx;
		line-height: 40rpx;
		margin-right: 30rpx;
		padding-top: 18rpx;
	}

	.line20 {
		height: 20rpx;
		background: #F8F8F8;
	}

	.box-border {
		border: 1rpx solid #ddd;
		width: 100%;
		padding: 22rpx 20rpx;
		box-sizing: border-box;
		margin-top: 10rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333333;
		line-height: 44rpx;
		min-height: 88rpx;
	}

	.save {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
	}

	.close {
		position: absolute;
		width: 44rpx;
		height: 44rpx;
		right: 32rpx;
		top: 32rpx;
	}

	.drug text {
		height: 56rpx;
		box-sizing: border-box;
		border: 2rpx solid #EEEEEE;
		border-radius: 4rpx;
		display: inline-block;
		font-size: 28rpx;
		color: #999999;
		padding: 0 16rpx;
		line-height: 52rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.drug text.cur {
		background: var(--themeColor);
		border-color: var(--themeColor);
		color: #fff;
	}

	.confir {
		padding-top: 40rpx;
		border-top: none;
	}
</style>
<style lang="scss" scoped>
	:deep(.uni-forms-item) {
		border-top: 1rpx solid #e5e5e5;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 0rpx;
		padding: 10rpx 0;

		.uni-forms-item__label {
			height: auto;
		}

		.uni-forms-item__content {
			display: flex;
			align-items: center;

			.uni-easyinput__content-input {
				text-align: right;
				padding-right: 20rpx;
				font-size: 28rpx;
				color: #666666;
			}

			.checklist-group {
				justify-content: flex-end;

				.checklist-box {
					margin-right: 0;
					margin-left: 50rpx;
				}
			}
		}
	}

	:deep(.uni-forms-item:first-child) {
		border-top: none;
	}

	:deep(.uni-checkbox-input) {
		border-radius: 50%;
	}
</style>